<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>${articleInfo.title} - 毕设新闻</title>

    <script src="/assets/vendors/pace/pace.min.js"></script>
    <link href="/assets/vendors/pace/themes/pace-theme-minimal.css" rel="stylesheet"/>

    <link rel='stylesheet' media='all' href='/assets/vendors/font-awesome/css/font-awesome.min.css'/>
    <link rel="stylesheet" media='all' href="/assets/vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" media='all' href="/assets/vendors/animate/animate.min.css">
    <link rel='stylesheet' media='all' href='/assets/css/style.css'/>
    <link rel='stylesheet' media='all' href='/assets/css/layout.css'/>
    <link rel='stylesheet' media='all' href='/assets/css/plugins.css'/>
    <link rel='stylesheet' media='all' href='/assets/css/addons.css'/>

    <link rel='stylesheet' media='all' href="/assets/vendors/baguette/baguetteBox.min.css"/>

    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/utils.js"></script>

    <script type="text/javascript" src="/assets/vendors/layer/layer.js"></script>

    <script type="text/javascript" src="/assets/js/sea.js"></script>
    <script type="text/javascript" src="/assets/js/sea.config.js"></script>

    <script type="text/javascript" src="/js/date.format.js"></script>


    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" href="http://mtons.com/dist/images/logo.png"/>
    <link rel="shortcut icon" href="http://mtons.com/dist/images/logo.png"/>

    <script type="text/javascript">
        var _base_path = '$!{base}';

        window.app = {
            base: '',
            LOGIN_TOKEN: '$!{profile.id}'
        };

        window.UEDITOR_HOME_URL = '/assets/vendors/ueditor/';
    </script>
</head>
<body>

<#include "/inc/header.ftl">

<!--.site-main -->
<div class="wrap" id="wrap">
    <div class="container">
        <div class="row">
            <div class="main clearfix">
                <!-- left -->
                <div class="col-xs-12 col-md-9 side-left">
                    <div class="shadow-box">
                        <h1 class="post-title">${articleInfo.title}</h1>
                        <div class="clearfix post-other">
            <span class="pull-left author">
                <a class="author-name" href="/ta/1" target="_blank">${articleInfo.user.nickname}</a>
            </span>
                            <time class="pull-left time">${articleInfo.createTime?datetime}</time>
                            <span class="pull-left time">浏览: ${articleInfo.hits}</span>
                            <ul class="tags">
                            </ul>
                            <span class="pull-right action-box"></span>
                        </div>
                        <div class="post-frame">
                            <div class="post-content">
                                ${articleInfo.content}
                            </div>
                        </div>
                    </div>
                    <!-- post/end -->

                    <div id="chat" class="chats shadow-box">
                        <div class="chat_other">
                            <h4>全部评论: <i id="chat_count">4</i> 条</h4>
                        </div>
                        <ul id="chat_container" class="its">
                        </ul>
                        <div id="pager" class="text-center"></div>
                        <div class="cbox-wrap">
                            <div class="cbox-title">我有话说: <span id="chat_reply" style="display:none;">@<i
                                            id="chat_to"></i></span>
                            </div>
                            <div class="cbox-post">
                                <div class="cbox-input">
                                    <textarea id="chat_text" rows="3" placeholder="请输入评论内容"></textarea>
                                    <input type="hidden" value="0" name="chat_pid" id="chat_pid">
                                </div>
                                <div class="cbox-ats clearfix">
                                    <div class="ats-func">
                                        <ul class="func-list">
                                            <li class="list-b">
                                                <a href="javascript:void(0);" class="join" id="c-btn"><i
                                                            class="fa fa-smile-o fa-2"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ats-issue">
                                        <button id="btn-chat" class="btn btn-success btn-sm bt">发送</button>
                                    </div>
                                </div>
                            </div>
                            <div class="phiz-box" id="c-phiz" style="display:none">
                                <div class="phiz-list" view="c-phizs"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- right sidebar-->
                <div class="col-xs-12 col-md-3 side-right hidden-xs hidden-sm">
                    <ul class="list-group about-user">
                        <li class="list-group-item user-card" >
                            <div class="ava">
                                <a href="/other/${author.id}">
                                    <img class="img-circle" src="${author.avatar}"/>
                                </a>
                            </div>
                            <div class="user-info">
                                <div class="nk mb10">${author.nickname}</div>
                                <div class="mb6">
                                    <a class="btn btn-success btn-xs" href="javascript:void(0);" data-id="1" rel="follow">+ 关注</a>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item">
                            <div class="user-datas">
                                <ul>
                                    <li><strong>${articleCount}</strong><span>发布</span></li>
                                    <li class="noborder"><strong>${commentCount}</strong><span>评论</span></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a class="btn btn-success btn-sm" href="javascript:void(0);" data-id="${articleInfo.id}" rel="favor">喜欢</a>
                            <strong id="favors">${favorCount}</strong> 喜欢
                        </li>
                    </ul>
                    <div class="widget-box shadow-box">
                        <div class="title">
                            <h3><i class="fa fa-users "></i> 热门用户</h3>
                        </div>
                        <ul id="hotuser" class="hotusers">

<#--                            <img src="/assets/images/spinner.gif">-->

                        </ul>
                    </div>

                    <div class="widget-box shadow-box">
                        <div class="title">
                            <h3>
                                <i class="fa fa-area-chart"></i> 热门文章
                                <a href="" class="rrh-refresh"><i class="fa fa-refresh"></i>换一批</a>
                            </h3>

                        </div>
                        <ul class="box-list" id="hots">
                            <li class="text-center"><img src="/assets/images/spinner.gif"></li>
                        </ul>
                    </div>

                    <div class="widget-box shadow-box">
                        <div class="title">
                            <h3><i class="fa fa-bars"></i> 最新发布
                                <a href="" class="rrh-refresh">查看更多</a></h3>
                        </div>
                        <ul class="box-list" id="latests">
                            <li class="text-center"><img src="/assets/images/spinner.gif"></li>
                        </ul>
                    </div>
                </div>


                <script type="text/javascript">
                    var hot_li_template = '<li><div class="li-out"><span class="last"><i>{0}</i></span><span class="name"><a  href="{1}">{2}</a></span><span class="nums">{3}</span></div></li>'
                    var latest_li_template = '<li><div class="li-out"><span class="name"><a  href="{1}">{2}</a></span><span class="nums">{3}</span></div></li>'

                    var hotUser_li_template = '<li class=""><a  href="{1}"><img src="{0}" class="imguser"/></a></li>'

                    seajs.use('sidebox', function (sidebox) {
                        sidebox.init({
                            latestUrl: '/api/latests.json',
                            hotUrl: '/api/hots.json',
                            hotTagUrl: '/api/hot_tags.json',
                            hotUserUrl: '/api/hotusers.json',

                            maxResults: 6,
                            // callback
                            onLoadHot: function (i, data) {
                                var url = '/view/' + data.id + '.html';
                                var item = jQuery.format(hot_li_template, i + 1, url, data.title, numberScale(data.hits));
                                return item;
                            },
                            onLoadLatest: function (i, data) {
                                var url = '/view/' + data.id + '.html';
                                var item = jQuery.format(latest_li_template, i + 1, url, data.title, numberScale(data.hits));
                                return item;
                            },
                            onLoadHotUser: function (i, data) {
                                var url = '/other/' + data.id;
                                var item = jQuery.format(hotUser_li_template, data.avatar, url, data.name, data.fans);
                                return item;
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
</div>

<#include "/inc/footer.ftl">
<a href="#" class="site-scroll-top"></a>

<script type="text/javascript">
    seajs.use('main', function (main) {
        main.init();
    });
</script>
<script type="text/plain" id="chat_template">
    <li id="chat{5}">
        <a class="avt fl" target="_blank" href="/ta/{0}">
            <img src="{1}">
        </a>
        <div class="chat_body">
            <h5>
                <div class="fl"><a class="chat_name" href="/ta/{0}">{2}</a><span>{3}</span></div>
                <div class="fr reply_this"><a href="javascript:void(0);" onclick="goto('{5}', '{2}')">[回复]</a></div>
                <div class="clear"></div>
            </h5>
            <div class="chat_p">
                <div class="chat_pct">{4}</div> {6}
            </div>
        </div>
        <div class="clear"></div>
        <div class="chat_reply"></div>
    </li>

</script>

<script type="text/javascript">
    function goto(pid, user) {
        document.getElementById('chat_text').scrollIntoView();
        $('#chat_text').focus();
        $('#chat_text').val('');
        $('#chat_to').text(user);
        $('#chat_pid').val(pid);

        $('#chat_reply').show();
    }

    var container = $("#chat_container");
    var template = $('#chat_template')[0].text;

    seajs.use('comment', function (comment) {
        comment.init({
            load_url: '/comment/list/${articleInfo.id}',
            post_url: '/comment/submit',
            toId: '${articleInfo.id}',
            onLoad: function (i, data) {

                var content = ContentRender.wrapItem(data.content);

                var quoto = '';
                if (false) {
                    var pat = data.comment;
                    var pcontent = ContentRender.wrapItem(pat.content);
                    quoto = '<div class="quote"><a href="/ta/' + pat.user.id + '">@' + pat.user.nickname + '</a>: ' + pcontent + '</div>';
                }
                var item = jQuery.format(template,
                    data.user.id,
                    data.user.avatar,
                    data.user.nickname,
                    new Date(data.created).format("yyyy-MM-dd hh:mm:ss"),
                    content,
                    data.id, quoto);
                return item;
            }
        });
    });

    seajs.use('phiz', function (phiz) {
        $("#c-btn").jphiz({
            base: '/assets',
            textId: 'chat_text',
            lnkBoxId: 'c-lnk',
            phizBoxId: 'c-phiz'
        });
    });

</script>
</body>
</html>

